<template>
  <div class="login">
    <div class="container">
      <h1>令牌登录</h1>
      <qf-form :formItem="formItem" :formBtns="formBtns"></qf-form>
    </div>
  </div>
</template>

<script>
// import { postLoginTokenApi } from "@/api/login";

import { mapActions } from "vuex";

export default {
  methods: {
    ...mapActions({
      login: "user/FETCH_TOKEN_LOGIN",
    }),
  },
  data() {
    // 1 定义
    const checkAccount = (rules, value, callback) => {
      if (/^1\d{10}$/.test(value) || /^\w{3, 10}$/.test(value)) {
        callback();
      } else {
        callback(new Error("手机或账号格式有误格式有误"));
      }
    };
    // 2 返回
    return {
      // 表单配置
      formItem: [
        // ...
        {
          rules: [{ validator: checkAccount, trigger: "blur" }],

          field: "account",

          placeholder: "请输入手机号或账号",
          icon: "el-icon-user-solid",
          type: "input",
        },
        {
          rules: [{ required: true, message: "验证码", trigger: "blur" }],
          field: "token",

          placeholder: "请输入验证码",
          icon: "el-icon-lock",
          type: "input",
        },
        // ...
      ],
      // 表单按钮组
      formBtns: [
        {
          icon: "el-icon-back",
          type: "",
          click: () => this.jump("/login"),
        },
        {
          content: "登录",
          type: "primary",
          click: async (formData) => {
            console.log("表单数据", formData);

            const res = await this.login(formData);
            if (res.meta.state === 200) {
              this.$message.success(res.meta.msg);
              this.jump("/");
            } else {
              // 密保写错了、密码错了、用户不存在
              this.$message.error(res.meta.msg);
            }

            // const res = await postLoginTokenApi(formData);
            // if (res.meta.state === 200) {
            //   this.$message.success(res.meta.msg);
            //   localStorage.setItem("uname", res.data.uname);
            //   localStorage.setItem("roleName", res.data.roleName);
            //   localStorage.setItem("token", res.data.token);
            //   this.jump("/");
            // } else {
            //   this.$message.error(res.meta.msg);
            // }
          },
        },
      ],
      // ...
    };
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background-color: #2d3a4b;

  display: flex;
  justify-content: center;
  align-items: center;

  .container {
    width: 300px;
    h1 {
      color: #fff;
      font-size: 50px;
      margin-bottom: 15px;
      text-align: center;
    }
    :deep(.el-select) {
      width: 100% !important;
    }
    :deep(.el-button) {
      width: 30px;
      i {
        margin-left: -8px;
      }
      &:last-child {
        width: calc(100% - 56px);
      }
    }
  }
}
</style>
